<template>
  <div style=" background: #ffffff;margin-bottom:15rem">
    <!-- 头像 -->
    <div class="us_box">
      <img src="../img/001.gif" class="user-logo" onclick="toUrl('/Setting/baseInfo')" />

      <div class="user-info">
        <font class="username" onclick="toUrl('/Setting/baseInfo')">MB_1c4477449</font>
        <p class="grade" onclick="toUrl('/User/userRight')">
          <img src="https://ecimg.happigo.com/data/upload/member/level/mvip1.png" />
        </p>
      </div>
    </div>
    <!-- 订单 -->
    <div class="order">
      <div class="title border-1px" onclick="toUrl('/order/index')">
        <span style="float: left;">我的订单</span>
        <font class="fr"  style="float: right;width:3rem;height: 1rem;font-size: 14px;background: #ffffff;">
          查看全部订单
          <img src="../img/arrow2.png"  style="float: right;"/>
        </font>
      </div>
      <div class="order-tab clearfloat">
        <div onclick="toUrl('/Order/index/tab/NeedToPay_tab')">
          <img src="../img/order_ico1.png" />
          <p>待付款</p>
          <font style="display: none;">0</font>
        </div>
        <div onclick="toUrl('/Order/index/tab/WaitForReceive_tab')">
          <img src="../img/order_ico2.png" />
          <p>待收货</p>
          <font style="display: none;">0</font>
        </div>
        <div onclick="toUrl('/Order/index/tab/Received_tab')">
          <img src="../img/order_ico3.png" />
          <p>待评价</p>
          <font style="display: none;">0</font>
        </div>
        <div onclick="toUrl('/Order/index/tab/returnGoods_tab')">
          <img src="../img/order_ico4.png" />
          <p>退货/款</p>
          <font style="display: none;">0</font>
        </div>
      </div>
    </div>
    <!-- 快乐币 -->
    <div class="order">
      <div class="title border-1px">
        <span style=" float: left;">我的资产</span>
      </div>
      <div class="asset-tab clearfloat" style="overflow: hidden;">
        <div
          onclick="toUrl('http://restapi.happigo.com/pages/member/points_wx.html?platform=wx&amp;username=MB_1C4477449&amp;access_token=F671CE7B21ABC054FF7E49E9CCD5074F')"
        >
          <font>0</font>
          <p>快乐币</p>
        </div>
        <div
          onclick="toUrl('https://restapi.happigo.com/pages/member/voucher.html?platform=wx&amp;vid=wx&amp;username=MB_1C4477449&amp;access_token=F671CE7B21ABC054FF7E49E9CCD5074F')"
        >
          <font>7</font>
          <p>优惠券</p>
        </div>
      </div>
    </div>
    <!-- 地址 -->
    <div class="tiems2">
      <ul>
        <li
          class="border-1px"
          onclick="toUrl('/address?back_url=/index.php?s=/user/myhappigo.html')"
        >
          <span>
            <img src="../img/icon_1.png" />
          </span>收货地址
          <img src="../img/arrow2.png" class="arrow" />
        </li>

        <li
          id="yushou"
          class="border-1px"
          onclick="toUrl('http://presale.happigo.com/index.php?s=/home/pre_sale_list/index/')"
        >
          <span>
            <img src="../img/icon_2.png" />
          </span>我的预售
          <img src="../img/arrow2.png" class="arrow" />
        </li>

        <li class="border-1px" onclick="toUrl('/user/Collection')">
          <span>
            <img src="../img/icon_3.png" />
          </span>我的收藏
          <img src="../img/arrow2.png" class="arrow" />
        </li>

        <li id="record" class="border-1px" onclick="toUrl('/user/Record/')">
          <span>
            <img src="../img/icon_4.png" />
          </span>我的足迹
          <img src="../img/arrow2.png" class="arrow" />
        </li>

        <li class="border-1px" onclick="toUrl('/help')">
          <span>
            <img src="../img/icon_5.png" />
          </span>帮助反馈
          <img src="../img/arrow2.png" class="arrow" />
        </li>
        <li class="border-1px" onclick="toUrl('/user/userRight')">
          <span>
            <img src="../img/icon_6.png" />
          </span>会员权益
          <img src="../img/arrow2.png" class="arrow" />
        </li>
        <li class="border-1px" onclick="toUrl('/setting')">
          <span>
            <img src="../img/icon_7.png" />
          </span>账号设置
          <img src="../img/arrow2.png" class="arrow" />
        </li>

        <!-- <li id="open_app" class="border-1px" onclick="toUrl('https://lkme.cc/oxC/Mk2aqu6w9')"><span><img src="../img/icon_8.png"></span>打开APP<img src="../img/arrow.png" class="arrow"></li> -->
      </ul>
    </div>
    <!-- 退出 -->
    <div class="tiems2" style=";width: 90%;border-top: 8px solid #eeeeee;border-bottom: 8px solid #eeeeee">
      <ul>
        <li class="border-1px" style="text-align:center;" @click="logout">
          <font color="red">退出当前账户</font>
        </li>
      </ul>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    logout(){
      this.$store.commit("logout");
      this.$router.push({ name: "login"})
    }
  }
};
</script>
<style>

.us_box {
    background-color: #fff;
    padding: 25px 0;
    text-align: center;
    margin-bottom: 10px;
    font-size: 14px;
   
}
.user-logo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
}
.user-info {
    margin-top: 8px;
}
.username {
    font-size: 1.28em;
}
.grade {
    color: #5a5a5a;
    font-size: 1.07em;
    line-height: 1em;
    margin-top: 5px;
}
.grade img {
    height: 1em;
    width: auto;
    margin-right: 3px;
}
.order {
    background-color: #fff;
    margin-bottom: 10px;
    font-size: 14px
}
.title {
    padding: 10px 10px 10px 15px;
    position: relative;
}
.order-tab {
    padding: 15px 2%;
}

.clearfloat {
    zoom: 1;
}
.order-tab>div {
    position: relative;
    float: left;
    width: 25%;
    text-align: center;
    color: #5a5a5a;
    font-size: 14px
}   
.order-tab>div img {
    height: 1.5em;
    width: auto;
    margin-bottom: 5px;
}
.asset-tab>div {
    position: relative;
    float: left;
    width: 40%;
    text-align: center;
    margin: 15px 0;
}
.asset-tab>div font {
    color: #1e1e1e;
    font-size: 14px
}
.asset-tab>div p {
    color: #5a5a5a;
    font-size: 14px;
    margin-top: 3px;
}
.tiems2 {
    background-color: #fff;
    padding: 0 10px;
    margin-bottom: 10px;
}
.tiems2 li {
    position: relative;
    padding: 15px 0;
    font-size: 16px;
    color: #1e1e1e;
    line-height: 1.2em;
    text-align: left;
}
.tiems2 span {
    display: inline-block;
    width: 1.8em;
    margin-left: 5px;
    float: left;
}
.arrow {
    float: right;
    height: 0.8em;
    width: auto;
    margin-top: 0.2em;
}
.tiems2 span img {
    height: 1.2em;
    width: auto;
}
.title font {
    color: #969696;
    font-size: 0.93em;
    margin-top: 0.2em;
}
.title font img {
    height: 0.8em;
    width: auto;
    margin-top: 0.3em;
    margin-left: 5px;
}
</style>